<template>
     <div class="handelBox">
          <div class="leftTab">
               <div class="menu radius1" :class="{ isActive: actvieMenu == menu1.meta.title }" @click="goRoute(menu1)">
                    {{ menu1.meta.title }}
               </div>
               <div class="menu radius1" :class="{ isActive: actvieMenu == menu2.meta.title }" @click="goRoute(menu2)">
                    {{ menu2.meta.title }}
               </div>
          </div>
          <div class="title">
               {{ title }}
          </div>
          <div class="rightTab">
               <div class="menu radius2" :class="{ isActive: actvieMenu == menu3.meta.title }" @click="goRoute(menu3)">
                    {{ menu3.meta.title }}
               </div>
               <div class="menu radius2" :class="{ isActive: actvieMenu == menu4.meta.title }" @click="goRoute(menu4)">
                    {{ menu4.meta.title }}
               </div>
          </div>
          <div class="userSettingBox">
               <Setting></Setting>
          </div>
     </div>
</template>

<script setup lang="ts">
import Setting from './setting/index.vue'
import { useRouter, useRoute } from 'vue-router'
import { ref, computed, onMounted } from 'vue'

const $router = useRouter()
const route = useRoute()
const props = defineProps(['menuList'])
const title = computed(() => {
     return import.meta.env.VITE_APP_TITLE
})
const menu1 = computed(() => {
     return props.menuList[0].children.find((item: any) => item.meta.title == '会议记录')
})
const menu2 = computed(() => {
     return props.menuList[0].children.find((item: any) => item.meta.title == '隐患记录')
})
const menu3 = computed(() => {
     return props.menuList[0].children.find((item: any) => item.meta.title == '督导记录')
})
const menu4 = computed(() => {
     return props.menuList[0].children.find((item: any) => item.meta.title == '用户管理')
})
const routeInstance = computed(() => {
     return route
})
onMounted(() => {
     actvieMenu.value = routeInstance.value.meta.title
})

const actvieMenu: any = ref('')
const goRoute = (val: any) => {
     actvieMenu.value = val.meta.title
     $router.push(val.path)
}
</script>

<style scoped lang="scss">
.handelBox {
     width: 100%;
     height: 100%;
     background: url('@/assets/images/layoutLargeScreen/handerBgc1.png') no-repeat;
     background-size: 100% 100%;
     display: flex;
     justify-content: center;
     position: relative;
     z-index: 10;
     align-items: center;

     > div {
          cursor: pointer;
     }

     .leftTab,
     .rightTab {
          display: flex;
          align-items: center;
          width: 16%;
          height: 100%;

          .opciyClass {
               opacity: 0;
          }

          .menu {
               width: 50%;
               padding-top: 5px;
               height: 50%;
               display: flex;
               align-items: center;
               justify-content: center;
               color: #fff;
               letter-spacing: 2px;
               font-size: 0.9vw;
               border: 1px solid #088ad6;
               margin: 10px;

               // 添加盒子内阴影
               box-shadow: 0 0 30px #0067c2 inset;
               font-family: 'YOUSHEBIAOTIHEI', sans-serif;

               &.radius1 {
                    border-radius: 0 25px 0 25px;
               }

               &.radius2 {
                    border-radius: 25px 0 25px 0;
               }

               &.isActive {
                    border: 1px solid #f48f03;
                    box-shadow: 0 0 50px #f48f03 inset;
               }
          }
     }

     .title {
          width: 28%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 22px;
          font-family: 'YOUSHEBIAOTIHEI', sans-serif;
          color: rgba(243, 252, 255, 0.9);
          text-shadow: 0px 0px 10px rgba(33, 187, 243, 0.685);
          letter-spacing: 2px;
          margin: 0 50px;
     }

     .userSettingBox {
          // padding-top: 15px;
          position: absolute;
          right: 20px;
          height: 100%;
          display: flex;
          align-items: center;
     }
}
</style>
